$(function () {
    let nowData = data.beautyData.mianpic;

    // 倒序
    function paixuz(data, ele) {
        // 临时存储源数据
        let tempData = nowData.concat();
        // 使用sort方法实现数据排序
        tempData.sort((a, b) => Number(b[ele]) - Number(a[ele]));
        return tempData;
    };

    // 正序
    function paixu(data, ele) {
        // 临时存储源数据
        let tempData = nowData.concat();
        // 使用sort方法实现数据排序
        tempData.sort((a, b) => Number(a[ele]) - Number(b[ele]));
        return tempData;
    };

    // 查询价格
    function chazhao(data, min, max) {
        //实现数组对象的深拷贝
        var temp = [];
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            if (data[i].goodzprice <= max && data[i].goodzprice >= min) {
                // console.log(data[i]);
                temp.push(data[i]);
            }
        }
        ;
        return temp;
    };
    // 品牌区域的切换
    $(".brand-con-a li").mouseover(function () {
        $(this).addClass("cur").siblings().removeClass("cur");
    })
    // 点击多选出现的区域
    var sou = 0;
    $(".icon-plus").click(function () {
        if (sou == 0) {
            $(this).children().text("-收起")
            $(".brand-cen").hide()
            $(".brand-con-1").show()
            sou = 1
            console.log(sou);
        } else if (sou != 0) {
            $(this).children().text("+更多")
            $(".brand-cen").show()
            $(".brand-con-1").hide()
            sou = 0
            console.log(sou);
        }
    })
    // 点击之后变成勾对
    var pin = 0;
    $(".brand-con-b li").click(function () {
        if (pin == 0) {
            $(this).css("background", "url(../commImg/dui3.png) 0 5px no-repeat")
            $(this).css("color", "red")
            pin = 1;
        } else if (pin != 0) {
            $(this).css("background", "url(../commImg/dui1.png) 0 5px no-repeat")
            $(this).css("color", "#555555")
            pin = 0;
        }
    })
    // 添加点击事件，进行排序的作用
    $(".filter-sort a").click(function () {
        $(this).addClass("cull").siblings().removeClass("cull");
        $(this).children(".iconfont").html("&#xe76d;");
        $(this).siblings().children().html("&#xe76c;")
    });
    // 价格查询的焦点事件
    $(".fp-box input").focus(function () {
        $(".fP-expand").show();
    })
    // 点击蒙版的右上角的x号就让蒙版取消
    $(".r").click(function () {
        $(".cuow").hide()
    })
    //清空按钮
    $(".qing").click(function () {
        $(".fp-box input").val("")
        $(".fP-expand").hide()
    })
    // $("#tiny,#huge").blur(function () {
    //     console.log(1);
    //     $(".fP-expand").hide()

    // })
    // 进行服务选择部分的切换背景图
    var kong = 0;
    $(".ul-lable").click(function () {
        if (kong == 0) {
            $(this).css("background", "url(../commImg/bao3.png) 0 2px no-repeat");
            $(this).css("color", "red")
            kong = 1;
        } else {
            $(this).css("background", "url(../commImg/bao1.png) 0 2px no-repeat");
            $(this).css("color", "")
            kong = 0;
        }
    })
    /* 大小图部分 */
    $(".an").click(function () {
        $(this).addClass("current")
        $(this).parent("li").siblings().children().removeClass("current")
    })
    $(".max").click(function () {
        $(".big").show()
        $(".small").hide()
        remenData(data.beautyData.mianpic, $('.big'));
    })
    $(".min").click(function () {
        $(".small").show()
        $(".big").hide()
        // 小图情况下的渲染
        xiaotu(data.beautyData.mianpic, $('.small'))
    })

    // 猜你喜欢渲染
    function showee(data1, arg2, ele) {
        var rels = "";
        data1.forEach(function (item1) {
            rels += `
        <li class="opacity_img">
            <div class="p-img">
                <a href="javascript:void(0);">
                    <img src="${item1.goodurls.nowurl}" alt="">
                </a>
            </div>
            <div class="p-price">￥${item1.goodzprice}</div>
            <div class="p-name">
                <a href="javascript:void(0);" title="${item1.goodtitle}">${item1.goodtitle}</a>
            </div>
            <div class="p-num">售出<em>${item1.sales}</em>件</div>
        </li>
            `
        })
        $(ele).html(rels)
    }

    showee(data.beautyData.guesspic, "guesspic", ".cai");

    //渲染
    function remenData(data, target) {
        var rels = '';
        data.forEach(function (item, i) {
            rels += `
            <li class="li-item">
                <a href="./details.html#${item.goodid}beautyData/mianpic" style="display:block;">
                <div class="li-item-1">
                <div class="p-imgs">
                    <img src="${item.goodurls.nowurl}" alt="">
                </div>
                <div class="sider">
                    <ul>
                        <li class="qie"><img src="${item.goodurls.picsurl[0]}" alt=""></li>
                        <li class="qie"><img src="${item.goodurls.picsurl[0]}" alt=""></li>
                        <li class="qie"><img src="${item.goodurls.picsurl[0]}" alt=""></li>
                        <li class="qie"><img src="${item.goodurls.picsurl[0]}" alt=""></li>
                    </ul>
                </div>
                <div class="p-lie">
                    <div class="p-price">￥${item.goodzprice}</div>
                    <div class="p-num"> 已售 <span>${item.sales}</span>件</div>
                </div>
                <div class="p-names">${item.goodtitle}</div>
                <div class="p-store"> <a href="javascript:void(0);" title="商创自营">${item.shopname}</a><i class="iconfont ">&#xe62d;</i></div>
                <div class="label_list"></div>
                <div class="p-operate">
                    <a href="javascript:void(0)" class="hui">
                        <label for=""> 对比</label>
                    </a>
                    <a href="javascript:void(0)" class="xin"><i class="iconfont zuo">&#xe607;</i>收藏</a>
                    <a href="javascript:void(0)" class="gou" data-index="${i}"><i class="iconfont">&#xe63f;</i>加入购物车</a>
                </div>
                </div>
                </a>
            </li>
            `;
        });
        $(target).html(rels);
    }

    // 商品部份的渲染
    remenData(data.beautyData.mianpic, $('.big'));

    // 小图渲染
    function xiaotu(data, target) {
        var rels1 = "";
        data.forEach(function (item, i) {
            rels1 += `
        <li class="gl-l-item">
        <a href="./details.html#${item.goodid}beautyData/mianpic" style="display:block;">
        <div class="gl-warp">
            <div class="col col-1">
                <div class="p-img">
                    <a href="./details.html#${item.goodid}beautyData/guesspic"><img
                            src="${item.goodurls.nowurl}" alt=""></a>
                </div>
                <div class="p-right">
                    <div class="p-name">
                        <a href="./details.html#${item.goodid}beautyData/guesspic">${item.goodtitle}</a>
                    </div>
                    <div class="p-lie">
                        <div class="p-num">销量：${item.sales}</div>
                        <div class="p-comm">评价：${item.goodcount}</div>
                    </div>
                </div>
            </div>
            <div class="col col-2">
                <div class="p-store">
                    <a href="javascript:void(0)" title="${item.shopname}" class="store">${item.goodtype}</a>
                    <a href="./details.html#${item.goodid}beautyData/guesspic" id="ke" class="p-ke"><i
                            class="iconfont h">&#xe62d;</i></a>
                </div>
            </div>
            <div class="col col-3">
                <div class="p-price">
                    <div class="shop-price">
                        ￥${item.goodzprice}
                    </div>
                    <div class="original-price">
                        ${item.goodprice}
                    </div>
                </div>
            </div>
            <div class="col col-4">
                <div class="p-operate">
                    <a href="javascript:void(0)" class="hui">
                        <label for=""> 对比</label>
                    </a>
                    <a href="javascript:void(0)" class="xin"><i
                            class="iconfont zuo">&#xe607;</i>收藏</a>
                    <a href="javascript:void(0)" class="gou" data-index=${i}><i
                            class="iconfont">&#xe63f;</i>加入购物车</a>
                </div>
            </div>
        </div>
        </a>
    </li>
            `;
        });
        //  插入数据
        $(target).html(rels1);
    }

    // 侧边数据渲染的封装
    function tui(data, target) {
        var rels2 = '';
        data.forEach(function (item) {
            rels2 += `
                <li class="opacity">
                    <a href="./details.html#${item.goodid}beautyData/guesspic" style="display:block;">
                        <div>
                            <div class="p-img">
                                <a href="./details.html#${item.goodid}beautyData/guesspic">
                                    <img src="${item.goodurls.nowurl}" width="190" height="190">
                                </a>
                            </div>
                            <div class="p-price">￥${item.goodzprice}</div>
                            <div class="p-name"><a href="./details.html#${item.goodid}beautyData/guesspic" title="麦斯威尔杰威尔发胶定型喷雾男士干胶头发持久定型造型啫喱水发蜡蓬松清香 快速定型，蓬松清香，不起白屑，">${item.goodtitle}</a></div>
                            <div class="p-num">已售<span>${item.sales}</span>件</div>
                        </div>
                    </a>
                </li>
                `;
        });
        //  插入数据
        $(target).html(rels2);
    }

    // 侧边数据渲染
    tui(data.beautyData.goodtui, $('.gs-warp .gs-list'))
    // 默认
    $("#mo").click(function () {
        remenData(data.beautyData.mianpic, $('.big'));
    })
    // 销量
    var xiao = 0;
    $("#xiao").click(function () {
        if (xiao == 0) {
            $(this).children(".iconfont").html("&#xe76d;");
            var xiaoliang = paixuz(nowData, "sales");
            remenData(xiaoliang, $(".big"))
            xiaotu(xiaoliang, $(".small"))
            xiao = 1;
        } else {
            $(this).children(".iconfont").html("&#xe76c;");
            var xiaoliang = paixu(nowData, "sales");
            remenData(xiaoliang, $(".big"))
            xiaotu(xiaoliang, $(".small"))
            xiao = 0;
        }
    })
    // 评论
    var lun = 0;
    $("#ping").click(function () {
        if (lun == 0) {
            $(this).children(".iconfont").html("&#xe76d;");
            var xiaoliang = paixuz(nowData, "goodcount");
            remenData(xiaoliang, $(".big"))
            xiaotu(xiaoliang, $(".small"))
            lun = 1;
        } else {
            $(this).children(".iconfont").html("&#xe76c;");
            var xiaoliang = paixu(nowData, "goodcount");
            remenData(xiaoliang, $(".big"))
            xiaotu(xiaoliang, $(".small"))
            lun = 0;
        }
    })
    // 价格
    var qian = 0;
    $("#jia").click(function () {
        if (qian == 0) {
            $(this).children(".iconfont").html("&#xe76d;");
            // 调用函数
            var xiaoliang = paixuz(nowData, "goodzprice");
            // 渲染大图
            remenData(xiaoliang, $(".big"))
            // 渲染小图
            xiaotu(xiaoliang, $(".small"))
            qian = 1;
        } else {
            $(this).children(".iconfont").html("&#xe76c;");
            var xiaoliang = paixu(nowData, "goodzprice");
            remenData(xiaoliang, $(".big"))
            xiaotu(xiaoliang, $(".small"))
            qian = 0;
        }
    })
    // 对比效果的小图切换
    var san = 0;
    $(".hui").on("click", function () {
        if (san == 0) {
            $(this).children("label").css("background", "url(../commImg/dui3.png) 0 2px no-repeat")
            $(this).children().css("color", "red")
            san = 1;
            console.log(san);
        } else {
            $(this).children("label").css("background", "url(../commImg/dui1.png) 0 2px no-repeat")
            $(this).children().css("color", "#555555")
            san = 0;
        }
        $(".lan").show()
    })
    // 隐藏对比栏
    $(".cang").click(function () {
        $(".lan").hide()
    })
    // 收藏效果的小图切换
    var xin = 0;
    $(".xin").on("click", function (ele) {
        if (xin == 0) {
            $(this).css("color", "red").children("i").html("&#xe85c;").css("color", "red")
            xin = 1;
            // 登陆的页面
            $(".yanzheng").show();
            $(".pd-x").click(function () {
                // 点击关闭登录页面
                $(".yanzheng").hide();
            })
        } else {
            $(this).css("color", "").children("i").html("&#xe85c;").css("color", "")
            xin = 0;
            // 登陆的页面
            $(".yanzheng").hide();
        }
    })
    // 确定按钮
    $(".que").click(function () {
        // 点击确定进行数据的筛选
        var min = Number($("#tiny").val());
        var max = Number($("#huge").val());
        var cha = chazhao(nowData, min, max)
        console.log(cha);
        remenData(cha, $(".big"))
        $(".fP-expand").hide()
        // 如果最小值大于最大值的时候或者把input的value的值为空的时候把提示信息的蒙版显示出来,
        if ($(".fp-box input").val("") && min > max) {
            $(".cuow").show()
        }

    })
    $(".qie img").mouseover(function () {
        var yi = $(this).attr("src");
        $(this).parents(".sider").prev().children("img").prop("src", yi)
    })
    var aa = true;
    $('.qiehuan').click(function () {
        if (aa) {
            $(this).find('div').eq(0).addClass('dis').siblings().removeClass('dis');
            $('.hzbottom').find('.hzbottom-form').eq(1).addClass('dis').siblings().removeClass(
                'dis');
            aa = false;
        } else {
            $(this).find('div').eq(1).addClass('dis').siblings().removeClass('dis');
            $('.hzbottom').find('.hzbottom-form').eq(0).addClass('dis').siblings().removeClass(
                'dis');
            aa = true;
        }
    });
    // 输入框焦点事件
    // 获取焦点----------------------(focus【获取焦点】)
    $('.form input[type="text"]').focus(function () {
        // 移除class
        $('.item-info').removeClass('itinfo');
        $(this).parent().addClass('itinfo');
        $(this).prev().css('color', '#d2d2d2');
    });
    // 当失去焦点时----------------（ blur  失去焦点）
    $('.form input[type="text"]').blur(function () {
        $('.item-info').removeClass('itinfo');
        $(this).prev().css('color', '#e8e8e8');
    });
    // 信息
    var xinxi = 0;
    $(".ul-label").click(function () {
        if (xinxi == 0) {
            $(this).css("background", "url(../commImg/dui3.png) 0 2px no-repeat")
            $(this).css("color", "red")
            xinxi = 1;
        } else {
            $(this).css("background", "url(../commImg/dui1.png) 0 2px no-repeat")
            $(this).css("color", "#555555")
            xinxi = 0;
        }
    })
    $(".li-item").click(function () {
    })
})